import React from "react";
import { createUseStyles } from "react-jss";

type RuleNames = "article" | "section";

const useStyles = createUseStyles<RuleNames>({
  article: {
    display: "flex",
    width: 400,
    height: 120,
    overflowX: "auto",
    backgroundColor: "yellowgreen",
    padding: 10,

    // 整个滚动条
    "&::-webkit-scrollbar": {
      height: 10
    },

    // 滚动条上的滚动滑块
    "&::-webkit-scrollbar-thumb": {
      borderRadius: 6,
      visibility: "hidden"
    },
    "&:hover::-webkit-scrollbar-thumb": {
      visibility: "visible",
      backgroundColor: "red"
    },

    // 滚动条上的滚动轨道
    "&::-webkit-scrollbar-track": {
      backgroundColor: "transparent"
    }
  },
  section: {
    flex: "none",
    width: 100,
    height: 100,
    backgroundColor: "red",
    marginRight: 10
  }
});

/**
 * 测试滚动条样式
 */
const TestScrollBar: React.FC = () => {
  const styles = useStyles();

  return (
    <article className={styles.article}>
      <section className={styles.section}>测试1</section>
      <section className={styles.section}>测试2</section>
      <section className={styles.section}>测试3</section>
      <section className={styles.section}>测试4</section>
      <section className={styles.section}>测试5</section>
      <section className={styles.section}>测试5</section>
      <section className={styles.section}>测试5</section>
      <section className={styles.section}>测试5</section>
      <section className={styles.section}>测试5</section>
      <section className={styles.section}>测试5</section>
      <section className={styles.section}>测试5</section>
      <section className={styles.section}>测试5</section>
      <section className={styles.section}>测试5</section>
      <section className={styles.section}>测试5</section>
      <section className={styles.section}>测试5</section>
    </article>
  );
};
export default TestScrollBar;
